<template>
  <div class="app-container">
    <el-container>
      <el-aside width="400px" class="fixed-aside">
        <div class="filter-container">
          <el-input
            v-model="filterText"
            placeholder="输入关键字进行过滤"
            clearable
            size="small"
            style="width: calc(100% - 220px); margin-right: 10px;"
          />
          <el-select
            v-model="currentSopName"
            placeholder="SOP名称"
            size="small"
            style="width: 100px; margin-right: 10px;"
            @change="handleSopNameChange"
          >
            <el-option
              v-for="item in sop_names"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          <el-tooltip content="启用/禁用手风琴模式" placement="top">
            <el-switch
              v-model="accordionMode"
              active-color="#13ce66"
              inactive-color="#ff4949"
              style="margin-right: 10px;"
            />
          </el-tooltip>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            size="small"
            :loading="listLoading"
            title="刷新"
            @click="loadAllData"
          />
        </div>
        <el-tree
          ref="treeRef"
          v-loading="listLoading || refreshLoading"
          :data="filteredTreeData"
          show-checkbox
          node-key="id"
          :props="{ label: 'name', children: 'children', isLeaf: 'leaf' }"
          :filter-node-method="filterNode"
          :default-expanded-keys="expandedIds"
          highlight-current
          draggable
          :accordion="accordionMode"
          @node-click="handleNodeClick"
          @check="handleCheckChange"
          @node-expand="handleNodeExpand"
          @node-collapse="handleNodeCollapse"
          @node-drag-start="handleDragStart"
          @node-drag-enter="handleDragEnter"
          @node-drag-leave="handleDragLeave"
          @node-drag-over="handleDragOver"
          @node-drag-end="handleDragEnd"
          @node-drop="handleDrop"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span>
              {{ data.name }}
              <el-tag v-if="data.children_count > 0" size="mini" type="info">{{ data.children_count }}</el-tag>
            </span>
            <span class="node-actions">
              <el-button
                type="text"
                size="small"
                title="刷新节点"
                @click.stop="loadAllData"
              >
                <i class="el-icon-refresh" />
              </el-button>
              <el-button
                type="text"
                size="small"
                title="添加子节点"
                @click.stop="handleAdd(data)"
              >
                <i class="el-icon-plus" />
              </el-button>
              <el-button
                type="text"
                size="small"
                title="删除节点"
                @click.stop="handleDelete(data)"
              >
                <i class="el-icon-delete" />
              </el-button>
            </span>
          </span>
        </el-tree>

        <div class="tree-actions">
          <el-button type="primary" size="small" style="margin-top: 10px" @click="handleAdd()">
            添加根节点
          </el-button>
        </div>
      </el-aside>

      <el-main class="scrollable-main">
        <el-card v-if="formVisible">
          <div slot="header" class="card-header">
            <span>{{ formTitle }}</span>
            <div>
              <el-button type="success" size="small" :loading="formLoading" @click="handleSave">
                <i :class="{'el-icon-success': saveSuccess, 'el-icon-upload': !saveSuccess}" />
                {{ saveSuccess ? '已保存' : '保存' }}
              </el-button>
              <el-button type="primary" size="small" :disabled="!form.id" @click="handleTest">测试</el-button>
              <el-button size="small" @click="formVisible = false">取消</el-button>
            </div>
          </div>

          <!-- 保存成功提示 -->
          <el-alert
            v-if="saveSuccess"
            type="success"
            title="保存成功"
            :description="form.id ? '数据已更新' : '新数据已创建，您可以继续编辑'"
            show-icon
            :closable="false"
            style="margin-bottom: 15px;"
          />

          <el-form v-loading="formLoading" :model="form" label-position="top" label-width="120px">
            <!-- 使用标签页将表单分成几个部分 -->
            <el-tabs v-model="activeTab">
              <!-- 基本信息标签页 -->
              <el-tab-pane label="基本信息" name="basic">
                <!-- 父节点信息 -->
                <div v-if="form.id" class="form-section parent-section">
                  <div class="section-title">父节点信息</div>
                  <div class="form-inline-group">
                    <el-tag type="info" class="parent-tag">{{ form.parent_name }}</el-tag>
                    <el-input v-model="form.parent_id" placeholder="父节点ID" size="small" class="parent-id-input">
                      <template slot="prepend">ID:</template>
                    </el-input>
                  </div>
                </div>

                <!-- 基本信息分组 -->
                <div class="form-section info-section">
                  <div class="section-title">基本信息</div>
                  <div class="form-flex-group">
                    <el-form-item label="名称" class="form-item-flex">
                      <el-input v-model="form.name" placeholder="请输入名称" />
                    </el-form-item>
                    <el-form-item label="SOP名称" class="form-item-flex">
                      <el-select v-model="form.sop_name" placeholder="请选择SOP名称" style="width: 100%">
                        <el-option
                          v-for="item in sop_names"
                          :key="item"
                          :label="item"
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>

                <!-- 设置信息 -->
                <div class="form-section settings-section">
                  <div class="section-title">设置</div>
                  <div class="form-flex-group">
                    <el-form-item label="可以执行" class="form-item-small">
                      <el-switch
                        v-model="form.disabled"
                        active-color="#ff4949"
                        inactive-color="#13ce66"
                        :active-value="true"
                        :inactive-value="false"
                      />
                    </el-form-item>
                    <el-form-item label="默认AI模型" class="form-item-medium">
                      <el-select v-model="form.engine" placeholder="请选择AI模型" style="width: 100%">
                        <el-option
                          v-for="item in ai_engines"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="颜色" class="form-item-small">
                      <div class="color-selection-container">
                        <el-color-picker v-model="form.color" :predefine="predefineColors" />
                        <span class="color-preview" :style="{backgroundColor: form.color}" />
                        <el-tooltip placement="top">
                          <div slot="content">
                            <p>SOP重要性颜色指南：</p>
                            <p><span class="color-dot" style="background-color: #f56c6c" /> 红色 - 紧急任务，最高优先级</p>
                            <p><span class="color-dot" style="background-color: #e6a23c" /> 橙色 - 重要任务，高优先级</p>
                            <p><span class="color-dot" style="background-color: #E6CF00" /> 金黄色 - 关键流程，需特别关注</p>
                            <p><span class="color-dot" style="background-color: #409EFF" /> 蓝色 - 标准流程，常规处理</p>
                            <p><span class="color-dot" style="background-color: #67c23a" /> 绿色 - 次要任务，低优先级</p>
                            <p><span class="color-dot" style="background-color: #909399" /> 灰色 - 可选任务，参考信息</p>
                            <p><span class="color-dot" style="background-color: #9B55FF" /> 紫色 - 创意相关，需要创新思维</p>
                            <p><span class="color-dot" style="background-color: #9F8170" /> 棕色 - 稳定性任务，需谨慎处理</p>
                            <p><span class="color-dot" style="background-color: #00CCCC" /> 青色 - 技术相关，专业性内容</p>
                            <p><span class="color-dot" style="background-color: #CC6699" /> 粉红 - 市场相关，客户体验</p>
                            <p><span class="color-dot" style="background-color: #6B5152" /> 暗红 - 管理相关，内部控制</p>
                            <p><span class="color-dot" style="background-color: #336699" /> 深蓝 - 战略相关，长期规划</p>
                            <p>提示：避免选择白色系颜色，以免与背景融合</p>
                          </div>
                          <i class="el-icon-question color-help-icon" />
                        </el-tooltip>
                      </div>
                    </el-form-item>
                    <el-form-item label="排序" class="form-item-small">
                      <el-input v-model="form.position" placeholder="输入序号(数字)" />
                    </el-form-item>
                  </div>
                </div>

                <!-- 用户输入提示 -->
                <div class="form-section prompt-section">
                  <div class="section-title">用户输入提示</div>
                  <el-input v-model="form.placeholder" type="textarea" :rows="3" placeholder="提示用户输入什么" />
                </div>
              </el-tab-pane>

              <!-- 提示词设置标签页 -->
              <el-tab-pane label="提示词设置" name="prompt">
                <!-- 选择使用模板ID或自定义提示词 -->
                <el-form-item>
                  <el-radio-group v-model="usePromptTemplate" @change="handlePromptTypeChange">
                    <el-radio :label="true">使用模板ID</el-radio>
                    <el-radio :label="false">自定义提示词</el-radio>
                  </el-radio-group>
                </el-form-item>

                <!-- 模板ID选择 -->
                <el-form-item v-if="usePromptTemplate" label="prompt模板ID">
                  <el-select
                    v-model="form.aiprompt_id"
                    placeholder="输入名称搜索创建好的prompt模板"
                    filterable
                    remote
                    reserve-keyword
                    style="width: 100%"
                    :remote-method="remoteSearchAiPrompt"
                    :loading="aipromptLoading"
                    @change="handleAiPromptChange"
                  >
                    <el-option
                      v-for="item in aipromptOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>

                <!-- 自定义提示词 -->
                <el-form-item v-if="!usePromptTemplate" label="提示词">
                  <div class="editor-container">
                    <v-md-editor
                      v-model="form.prompt"
                      mode="edit"
                      height="calc(70vh - 120px)"
                      disabled-menus=""
                      :default-show-preview="false"
                      class="no-preview-editor"
                      placeholder="请输入提示词，支持Markdown格式"
                    />
                    <el-alert
                      type="info"
                      :title="userContentTip"
                      :closable="false"
                      show-icon
                      style="margin-top: 10px;"
                    />
                  </div>
                </el-form-item>
              </el-tab-pane>

              <!-- 输出设置标签页 -->
              <el-tab-pane label="输出模板" name="output">
                <el-form-item label="输出模板">
                  <div class="editor-container">
                    <v-md-editor
                      v-model="form.output_template"
                      mode="edit"
                      height="calc(70vh - 120px)"
                      disabled-menus=""
                      :default-show-preview="false"
                      class="no-preview-editor"
                      placeholder="请输入输出模板，支持Markdown格式"
                    />
                    <el-alert
                      type="info"
                      :title="outputTemplateTip"
                      :closable="false"
                      show-icon
                      style="margin-top: 10px;"
                    />
                  </div>
                </el-form-item>
              </el-tab-pane>

              <!-- 高级信息标签页 -->
              <el-tab-pane v-if="form.id" label="信息记录" name="info">
                <el-descriptions border :column="2">
                  <el-descriptions-item v-if="form.create_at" label="创建时间">
                    {{ form.create_at }}
                  </el-descriptions-item>
                  <el-descriptions-item v-if="form.update_at" label="更新时间">
                    {{ form.update_at }}
                  </el-descriptions-item>
                  <el-descriptions-item v-if="form.id" label="ID">
                    {{ form.id }}
                  </el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
            </el-tabs>
          </el-form>
        </el-card>

        <el-empty v-else description="请选择或添加一个AI模型" />
      </el-main>
    </el-container>

    <!-- 测试对话框 -->
    <el-dialog
      title="测试AI模型"
      :visible.sync="testVisible"
      width="60%"
      :close-on-click-modal="false"
    >
      <el-form>
        <el-form-item label="测试内容">
          <el-input
            v-model="testInput"
            type="textarea"
            :rows="5"
            :placeholder="testplaceholder"
          />
        </el-form-item>
      </el-form>

      <div v-if="testResult" class="test-result">
        <h3>测试结果：</h3>
        <v-md-editor
          v-model="testResult"
          mode="preview"
          preview-theme="vuepress"
          class="result-content"
        />
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="testVisible = false">关闭</el-button>
        <el-button type="primary" :loading="testLoading" @click="executeTest">执行测试</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { Post, Put, Delete, TreeAll } from '@/api/cms/aimodeltree'
import { Get as GetAiPrompt } from '@/api/cms/aiprompt'
import { Post as PostAiContent } from '@/api/cms/openai'
import qs from 'qs'

export default {
  data() {
    return {
      filterText: '',
      listLoading: false,
      refreshLoading: false,
      expandedIds: [],
      currentNode: null,
      formVisible: false,
      formTitle: '添加AI模型',
      formLoading: false,
      saveSuccess: false,
      checkedNodes: [],
      ai_engines: [
        {
          label: 'Claude 3.7 Sonnet',
          value: 'claude-3.7-sonnet'
        }
      ],
      sop_names: ['B2B业务', '独立站SEO', 'linkedin运营'],
      aipromptLoading: false,
      aipromptOptions: [],
      testLoading: false,
      testResult: '',
      testVisible: false,
      testInput: '',
      testpayload: {
        prompt: '',
        engine: 'claude-3.7-sonnet',
        humanway: false
      },
      testplaceholder: '请输入测试内容',
      usePromptTemplate: false, // 默认使用模板ID
      treeData: [], // 树数据
      allTreeData: [], // 存储所有未筛选的树数据
      nodeCache: {}, // 节点数据缓存
      localStorageEnabled: true, // 是否启用本地存储
      localStorageKey: 'aimodel_tree_data', // 本地存储的key
      expandedNodesKey: 'aimodel_expanded_nodes', // 展开节点的key

      // 表单数据
      form: {
        id: '',
        name: '',
        parent_id: null,
        position: 1,
        parent_name: '',
        placeholder: '',
        aiprompt_id: null,
        aiprompt_name: '',
        engine: 'claude-3.7-sonnet',
        prompt: '',
        color: '#000',
        sop_name: 'B2B业务',
        output_template: '',
        create_at: '',
        update_at: '',
        disabled: false
      },
      dragState: {
        oldParentId: null,
        oldPosition: null,
        newParentId: null,
        newPosition: null
      },
      accordionMode: false,
      activeTab: 'basic',
      predefineColors: [
        '#f56c6c', // 红色 - 紧急
        '#e6a23c', // 橙色 - 重要
        '#E6CF00', // 金黄色 - 关键
        '#409EFF', // 蓝色 - 标准
        '#67c23a', // 绿色 - 次要
        '#909399', // 灰色 - 可选
        '#9B55FF', // 紫色 - 创意
        '#9F8170', // 棕色 - 稳定
        '#00CCCC', // 青色 - 技术
        '#CC6699', // 粉红 - 市场
        '#6B5152', // 暗红 - 管理
        '#336699' // 深蓝 - 战略
      ],
      userContentTip: '使用 {{user_content}} 来引用用户输入内容,预处理插件语法[[RPID_%s]]',
      outputTemplateTip: '定义输出格式模板，帮助AI生成更规范的回复内容',

      // 新增一个保存当前树状态的变量
      savedTreeState: {
        currentNodeId: null,
        expandedIds: []
      },
      currentSopName: 'B2B业务'
    }
  },

  computed: {
    // 根据当前选择的SOP名称筛选树数据
    filteredTreeData() {
      if (!this.currentSopName || !this.allTreeData || this.allTreeData.length === 0) {
        return this.treeData
      }

      // 递归筛选树节点
      const filterNodesBySopName = (nodes, sopName) => {
        if (!nodes || nodes.length === 0) return []

        return nodes.filter(node => {
          // 如果节点本身匹配sopName，则保留
          const nodeMatches = node.sop_name === sopName

          // 递归处理子节点
          if (node.children && node.children.length > 0) {
            node.children = filterNodesBySopName(node.children, sopName)
            // 如果子节点匹配，也保留父节点
            return nodeMatches || node.children.length > 0
          }

          return nodeMatches
        })
      }

      return filterNodesBySopName(JSON.parse(JSON.stringify(this.allTreeData)), this.currentSopName)
    }
  },

  watch: {
    filterText(val) {
      this.$refs.treeRef.filter(val)
    },
    accordionMode(val) {
      // 保存手风琴模式状态到localStorage
      localStorage.setItem('aimodel_accordion_mode', val)

      // 如果树组件已经初始化，则根据手风琴模式更新树的展开状态
      if (this.$refs.treeRef && this.$refs.treeRef.root.childNodes.length > 0) {
        if (val) {
          // 切换到手风琴模式
          // 先收起所有节点
          this.collapseAllNodes(this.$refs.treeRef.root)

          // 然后只展开第一个根节点
          if (this.$refs.treeRef.root.childNodes.length > 0) {
            this.$refs.treeRef.root.childNodes[0].expand()
          }

          // 清除之前保存的展开节点状态
          if (this.localStorageEnabled) {
            localStorage.removeItem(this.expandedNodesKey)
          }

          // 延迟执行，确保节点状态已更新
          this.$nextTick(() => {
            // 强制执行手风琴模式
            this.enforceAccordionMode()
          })
        } else {
          // 切换到非手风琴模式，可以选择性地恢复之前保存的展开状态
          // 这里不做任何操作，让用户自己展开需要的节点
        }
      }
    }
  },

  mounted() {
    // 组件挂载后的初始化操作
    this.getAiEngines()

    // 检查浏览器是否支持localStorage
    try {
      const testKey = 'test_localStorage'
      localStorage.setItem(testKey, testKey)
      localStorage.removeItem(testKey)
      this.localStorageEnabled = true
    } catch (e) {
      console.error('浏览器不支持localStorage或已被禁用:', e)
      this.localStorageEnabled = false
    }

    // 从localStorage读取手风琴模式状态
    const savedAccordionMode = localStorage.getItem('aimodel_accordion_mode')
    if (savedAccordionMode !== null) {
      this.accordionMode = savedAccordionMode === 'true'
    }

    // 如果是手风琴模式，清除之前保存的展开节点状态
    if (this.accordionMode && this.localStorageEnabled) {
      localStorage.removeItem(this.expandedNodesKey)
    }

    // 加载初始树数据
    this.loadAllData()

    // 强制关闭编辑器预览
    this.$nextTick(() => {
      // 延迟一点执行，确保DOM已经渲染
      setTimeout(() => {
        // 查找所有编辑器实例并强制隐藏预览区域
        const editors = document.querySelectorAll('.v-md-editor')
        editors.forEach(editor => {
          if (!editor.getAttribute('mode') || editor.getAttribute('mode') !== 'preview') {
            // 找到预览区域并隐藏
            const preview = editor.querySelector('.v-md-editor__preview')
            if (preview) {
              preview.style.display = 'none'
            }
            // 展开编辑区域
            const editorArea = editor.querySelector('.v-md-editor__editor')
            if (editorArea) {
              editorArea.style.width = '100%'
              editorArea.style.maxWidth = '100%'
              editorArea.style.borderRight = 'none'
            }
          }
        })

        // 添加编辑器滚动优化：当鼠标在编辑器上时，滚轮事件应该滚动编辑器而不是页面
        this.setupEditorScrollBehavior()
      }, 200)
    })
  },

  methods: {
    // 添加loadAllData方法，用于一次性加载所有数据
    loadAllData() {
      this.listLoading = true

      // 清空当前状态
      this.currentNode = null
      this.formVisible = false

      // 从API获取所有数据
      TreeAll('', qs.stringify({ sop_name: this.currentSopName })).then(response => {
        if (response.data && response.data.data) {
          // 存储所有数据
          this.allTreeData = this.processTreeData(response.data.data)

          // 设置已筛选的数据
          this.treeData = this.filteredTreeData

          // 缓存根节点数据
          this.nodeCache['root'] = this.allTreeData

          // 保存数据到本地存储
          this.saveDataToLocalStorage()

          // 确保树组件已经渲染完成
          this.$nextTick(() => {
            // 根据手风琴模式决定如何展开节点
            if (this.$refs.treeRef) {
              if (this.accordionMode) {
                // 手风琴模式下，只展开第一个根节点
                if (this.$refs.treeRef.root.childNodes.length > 0) {
                  this.$refs.treeRef.root.childNodes[0].expand()
                }
              } else {
                // 非手风琴模式，展开所有根节点或者之前展开的节点
                if (this.expandedIds.length > 0) {
                  this.expandedIds.forEach(id => {
                    const node = this.$refs.treeRef.getNode(id)
                    if (node) {
                      node.expand()
                    }
                  })
                }
              }
            }
          })
        }
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        this.$message.error('加载数据失败')
      })
    },

    // 递归处理树数据，确保children属性存在
    processTreeData(data) {
      if (!data || data.length === 0) return []

      return data.map(node => {
        // 如果有children_count但没有children属性，添加空children数组
        if (node.children_count > 0 && !node.children) {
          node.children = []
        }

        // 递归处理子节点
        if (node.children && node.children.length > 0) {
          node.children = this.processTreeData(node.children)
        }

        return node
      })
    },

    // SOP名称变更处理
    handleSopNameChange(value) {
      console.log('SOP名称已变更为:', value)

      // 更新当前SOP名称
      this.currentSopName = value

      // 直接调用loadAllData方法向后端获取数据
      this.loadAllData()
    },

    // 保存数据到本地存储
    saveDataToLocalStorage() {
      if (!this.localStorageEnabled) return

      try {
        // 保存节点缓存数据
        localStorage.setItem(this.localStorageKey, JSON.stringify(this.nodeCache))
        console.log('数据已保存到本地存储')
      } catch (error) {
        console.error('保存数据到本地存储失败:', error)
        // 如果存储失败（例如存储空间已满），禁用本地存储功能
        this.localStorageEnabled = false
      }
    },

    // 从本地存储加载数据
    loadDataFromLocalStorage() {
      if (!this.localStorageEnabled) return false

      try {
        const cachedData = localStorage.getItem(this.localStorageKey)
        if (cachedData) {
          this.nodeCache = JSON.parse(cachedData)
          console.log('从本地存储加载数据成功')
          return true
        }
      } catch (error) {
        console.error('从本地存储加载数据失败:', error)
        // 如果加载失败，禁用本地存储功能
        this.localStorageEnabled = false
      }

      return false
    },

    // 保存展开的节点ID
    saveExpandedNodes() {
      if (!this.localStorageEnabled || !this.$refs.treeRef) return

      // 手风琴模式下不保存展开节点状态
      if (this.accordionMode) {
        // 清除之前保存的展开节点状态
        localStorage.removeItem(this.expandedNodesKey)
        return
      }

      try {
        const expandedNodes = []

        // 递归获取所有展开的节点ID
        const getExpandedNodeIds = (node) => {
          if (node.expanded && node.data && node.data.id) {
            expandedNodes.push(node.data.id)
          }

          if (node.childNodes && node.childNodes.length > 0) {
            node.childNodes.forEach(childNode => {
              getExpandedNodeIds(childNode)
            })
          }
        }

        // 从根节点开始遍历
        this.$refs.treeRef.root.childNodes.forEach(node => {
          getExpandedNodeIds(node)
        })

        // 保存展开的节点ID
        localStorage.setItem(this.expandedNodesKey, JSON.stringify(expandedNodes))
        console.log('展开的节点ID已保存:', expandedNodes)
      } catch (error) {
        console.error('保存展开的节点ID失败:', error)
      }
    },

    // 加载展开的节点ID
    loadExpandedNodes() {
      if (!this.localStorageEnabled) return

      // 如果是手风琴模式，不加载保存的展开节点状态
      if (this.accordionMode) {
        this.expandedIds = []
        return
      }

      try {
        const expandedNodesStr = localStorage.getItem(this.expandedNodesKey)
        if (expandedNodesStr) {
          this.expandedIds = JSON.parse(expandedNodesStr)
          console.log('加载展开的节点ID成功:', this.expandedIds)
        }
      } catch (error) {
        console.error('加载展开的节点ID失败:', error)
      }
    },

    // 清除本地存储
    clearLocalStorage() {
      if (!this.localStorageEnabled) return

      try {
        // 清除节点缓存数据
        localStorage.removeItem(this.localStorageKey)

        // 如果是手风琴模式，也清除展开节点ID
        if (this.accordionMode) {
          localStorage.removeItem(this.expandedNodesKey)
        }

        console.log('本地存储已清除')
      } catch (error) {
        console.error('清除本地存储失败:', error)
      }
    },

    // 刷新树
    refreshTree() {
      this.refreshLoading = true

      // 清空当前选中的节点
      this.currentNode = null
      this.formVisible = false

      // 清空缓存
      this.nodeCache = {}

      // 清除本地存储的数据
      this.clearLocalStorage()

      // 加载所有数据
      this.loadAllData()

      // 重置loading状态
      setTimeout(() => {
        this.refreshLoading = false
        this.$message.success('刷新成功')
      }, 300)
    },

    // 加载初始数据
    loadInitialData() {
      // 先尝试从本地存储加载数据
      const hasLocalData = this.loadDataFromLocalStorage()

      // 加载展开的节点ID
      this.loadExpandedNodes()

      // 如果有本地数据，则直接使用本地数据
      if (hasLocalData && this.nodeCache['root'] && this.nodeCache['root'].length > 0) {
        console.log('使用本地缓存数据')
        this.allTreeData = this.nodeCache['root']
        this.treeData = this.filteredTreeData

        // 确保树组件已经渲染完成
        this.$nextTick(() => {
          // 根据手风琴模式决定如何展开节点
          if (this.$refs.treeRef && this.$refs.treeRef.root.childNodes.length > 0) {
            if (this.accordionMode) {
              // 手风琴模式下，只展开第一个根节点，忽略保存的展开状态
              // 先收起所有节点
              this.collapseAllNodes(this.$refs.treeRef.root)
              // 然后只展开第一个根节点
              this.$refs.treeRef.root.childNodes[0].expand()

              // 延迟执行，确保节点状态已更新
              this.$nextTick(() => {
                // 强制执行手风琴模式
                this.enforceAccordionMode()
              })
            } else {
              // 非手风琴模式，展开所有根节点或者之前展开的节点
              if (this.expandedIds.length > 0) {
                // 如果有保存的展开节点ID，则展开这些节点
                this.expandedIds.forEach(id => {
                  const node = this.$refs.treeRef.getNode(id)
                  if (node) {
                    node.expand()
                  }
                })
              }
            }
          }
        })

        return
      }

      // 如果没有本地数据，则加载所有数据
      this.loadAllData()
    },

    // 重置表单
    resetForm() {
      this.form.id = ''
      this.form.name = ''
      this.form.parent_id = null
      this.form.parent_name = ''
      this.form.placeholder = ''
      this.form.aiprompt_id = null
      this.form.aiprompt_name = ''
      this.form.engine = 'claude-3.7-sonnet'
      this.form.prompt = ''
      this.form.color = ''
      this.form.sop_name = 'B2B业务'
      this.form.output_template = ''
      this.form.create_at = ''
      this.form.update_at = ''
      this.form.disabled = false
      // 根据aiprompt_id是否存在设置usePromptTemplate
      this.usePromptTemplate = false
    },

    // 处理提示词类型变更
    handlePromptTypeChange(value) {
      if (value) {
        // 切换到使用模板ID
        this.form.prompt = ''
      } else {
        // 切换到自定义提示词
        this.form.aiprompt_id = null
        this.form.aiprompt_name = ''
      }
    },

    // 过滤节点方法
    filterNode(value, data) {
      if (!value) return true
      return data.name.toLowerCase().includes(value.toLowerCase())
    },

    // 节点点击事件
    handleNodeClick(data, node) {
      this.currentNode = data
      // 填充表单数据
      this.form.id = data.id
      this.form.name = data.name
      this.form.parent_id = data.parent_id
      this.form.position = data.position
      this.form.parent_name = data.parent_name || ''
      this.form.placeholder = data.placeholder
      this.form.aiprompt_id = data.aiprompt
      this.form.aiprompt_name = data.aiprompt_name || ''
      this.form.engine = data.engine || 'claude-3.7-sonnet'
      this.form.prompt = data.prompt
      this.form.color = data.color
      this.form.sop_name = data.sop_name || 'B2B业务'
      this.form.output_template = data.output_template || ''
      this.form.create_at = data.create_at
      this.form.update_at = data.update_at
      this.form.disabled = !!(data.disabled === true || data.disabled === 'true')

      // 根据aiprompt_id是否存在设置usePromptTemplate
      this.usePromptTemplate = !!this.form.aiprompt_id

      // 设置表单标题，显示当前编辑的模型名称
      this.formTitle = `修改 ${data.name}`

      this.formVisible = true

      // 在手风琴模式下，点击节点时自动展开该节点并折叠其他节点
      if (this.accordionMode && node) {
        // 找到当前节点的根节点
        let rootNode = node
        while (rootNode.parent && rootNode.parent.level > 0) {
          rootNode = rootNode.parent
        }

        // 如果找到了根节点，关闭根节点的所有兄弟节点
        if (rootNode.level === 1) {
          // 关闭所有其他根节点
          if (this.$refs.treeRef && this.$refs.treeRef.root.childNodes) {
            this.$refs.treeRef.root.childNodes.forEach(otherRootNode => {
              if (otherRootNode !== rootNode && otherRootNode.expanded) {
                // 递归收起节点及其所有子节点
                this.collapseNodeAndChildren(otherRootNode)
              }
            })
          }

          // 确保当前根节点展开
          if (!rootNode.expanded) {
            this.$nextTick(() => {
              rootNode.expand()
            })
          }
        }

        // 如果当前节点未展开，则展开它
        if (!node.expanded && node !== rootNode) {
          this.$nextTick(() => {
            node.expand()

            // 延迟执行，确保节点状态已更新
            this.$nextTick(() => {
              // 强制执行手风琴模式
              this.enforceAccordionMode()
            })
          })
        }
      }
    },

    // 递归收起节点及其所有子节点
    collapseNodeAndChildren(node) {
      if (!node) return

      // 先递归收起所有子节点
      if (node.childNodes && node.childNodes.length > 0) {
        node.childNodes.forEach(childNode => {
          this.collapseNodeAndChildren(childNode)
        })
      }

      // 然后收起当前节点
      if (node.expanded) {
        node.collapse()
      }
    },

    // 复选框选中事件
    handleCheckChange(data, checked) {
      if (checked) {
        this.currentNode = data
        // 填充表单数据
        this.form.id = data.id
        this.form.name = data.name
        this.form.parent_id = data.parent_id
        this.form.parent_name = data.parent_name || ''
        this.form.placeholder = data.placeholder
        this.form.position = data.position
        this.form.aiprompt_id = data.aiprompt
        this.form.aiprompt_name = data.aiprompt_name || ''
        this.form.engine = data.engine || 'claude-3.7-sonnet'
        this.form.prompt = data.prompt
        this.form.color = data.color
        this.form.sop_name = data.sop_name || 'B2B业务'
        this.form.output_template = data.output_template || ''
        this.form.create_at = data.create_at
        this.form.update_at = data.update_at
        this.form.disabled = !!(data.disabled === true || data.disabled === 'true')

        // 根据aiprompt_id是否存在设置usePromptTemplate
        this.usePromptTemplate = !!this.form.aiprompt_id

        // 设置表单标题，显示当前编辑的模型名称
        this.formTitle = `修改 ${data.name}`

        this.formVisible = true
      }
    },

    // 添加节点
    handleAdd(parentNode = null) {
      this.resetForm()
      if (parentNode) {
        this.form.parent_id = parentNode.id
        this.form.parent_name = parentNode.name
        this.form.sop_name = parentNode.sop_name || 'B2B业务'
        this.formTitle = `添加AI模型 (父节点: ${parentNode.name})`
      } else {
        this.formTitle = '添加根节点'
      }
      this.formVisible = true
    },

    // 保存表单
    handleSave() {
      this.formLoading = true
      this.saveSuccess = false

      // 保存当前树的状态
      this.saveTreeState()

      if (this.form.id) {
        // 更新
        Put(this.form.id, this.form).then(response => {
          this.formLoading = false

          // 显示成功消息
          this.$message.success('更新成功')
          this.saveSuccess = true

          // 3秒后重置保存状态
          setTimeout(() => {
            this.saveSuccess = false
          }, 3000)

          // 更新节点数据
          if (this.$refs.treeRef) {
            const node = this.$refs.treeRef.getNode(this.form.id)
            if (node) {
              // 更新节点数据
              Object.assign(node.data, this.form)

              // 高亮显示当前节点
              this.$refs.treeRef.setCurrentKey(this.form.id)

              // 如果父节点ID发生变化或sop_name发生变化，需要重新加载数据
              if (node.data.parent_id !== this.form.parent_id || node.data.sop_name !== this.form.sop_name) {
                // 重新加载所有数据
                this.loadAllData()

                // 等待树刷新完成后，恢复树的状态
                this.$nextTick(() => {
                  this.restoreTreeState()
                })
              } else {
                // 更新缓存中的节点数据
                this.updateNodeInAllTreeData(this.form.id, this.form)

                // 更新筛选后的树数据
                this.treeData = this.filteredTreeData

                // 保存更新后的缓存数据到本地存储
                this.saveDataToLocalStorage()
              }
            }
          }
        }).catch(() => {
          this.formLoading = false
          this.$message.error('更新失败')
        })
      } else {
        // 新增
        Post(this.form).then(response => {
          this.formLoading = false

          // 显示成功状态
          this.saveSuccess = true

          // 3秒后重置保存状态
          setTimeout(() => {
            this.saveSuccess = false
          }, 3000)

          // 从返回数据中获取新插入的数据
          if (response.data && response.data.data) {
            // 用返回的数据更新表单
            const newData = response.data.data
            this.form.id = newData.id
            this.form.create_at = newData.create_at
            this.form.update_at = newData.update_at

            // 切换到信息记录标签页显示新ID
            this.activeTab = 'info'
            this.$message.success('添加成功，您可以继续编辑')

            // 保存新节点ID到当前状态
            this.savedTreeState.currentNodeId = newData.id

            // 重新加载所有数据
            this.loadAllData()

            // 等待树刷新完成后，恢复树的状态并选中新节点
            this.$nextTick(() => {
              this.restoreTreeState()

              // 设置当前选中节点
              if (this.$refs.treeRef) {
                this.$refs.treeRef.setCurrentKey(newData.id)
              }
            })
          } else {
            this.$message.success('添加成功')

            // 重新加载所有数据
            this.loadAllData()

            // 等待树刷新完成后，恢复树的状态
            this.$nextTick(() => {
              this.restoreTreeState()
            })
          }
        }).catch(() => {
          this.formLoading = false
          this.$message.error('添加失败')
        })
      }
    },

    // 递归更新allTreeData中的节点
    updateNodeInAllTreeData(nodeId, newData) {
      const updateNode = (nodes) => {
        if (!nodes || nodes.length === 0) return false

        for (let i = 0; i < nodes.length; i++) {
          if (nodes[i].id === nodeId) {
            // 找到节点，更新数据
            Object.assign(nodes[i], newData)
            return true
          }

          // 递归查找子节点
          if (nodes[i].children && nodes[i].children.length > 0) {
            if (updateNode(nodes[i].children)) {
              return true
            }
          }
        }

        return false
      }

      // 更新allTreeData中的节点
      updateNode(this.allTreeData)

      // 更新缓存
      this.nodeCache['root'] = this.allTreeData
    },

    // 删除节点
    handleDelete(node) {
      if (!node || !node.id) return

      this.$confirm('确定要删除此节点吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Delete(node.id).then(() => {
          // 保存当前树的状态
          this.saveTreeState()

          // 删除成功后重新加载所有数据
          this.loadAllData()

          this.formVisible = false
          this.$message.success('删除成功')

          // 等待树刷新完成后，恢复树的状态
          this.$nextTick(() => {
            this.restoreTreeState()
          })
        }).catch(() => {
          this.$message.error('删除失败')
        })
      })
    },

    // 获取AI引擎列表
    getAiEngines() {
      GetAiPrompt(null, qs.stringify({
        pagesize: 1,
        page: 1
      })).then(response => {
        if (response.data && response.data.ai_engines) {
          // 确保默认引擎存在
          const hasDefaultEngine = response.data.ai_engines.some(engine => engine.value === 'claude-3.7-sonnet')
          if (!hasDefaultEngine) {
            response.data.ai_engines.unshift({
              label: 'claude-3.7-sonnet',
              value: 'claude-3.7-sonnet'
            })
          }
          this.ai_engines = response.data.ai_engines
        }
      })
    },

    // 远程搜索AI提示
    remoteSearchAiPrompt(query) {
      if (query !== '') {
        this.aipromptLoading = true
        GetAiPrompt(null, qs.stringify({
          kw: query,
          pagesize: 10,
          page: 1
        })).then(response => {
          this.aipromptOptions = response.data.data.map(item => {
            return {
              value: item.id,
              label: item.name
            }
          })
          this.aipromptLoading = false
        }).catch(() => {
          this.aipromptLoading = false
        })
      } else {
        this.aipromptOptions = []
      }
    },

    // AI提示选择变更
    handleAiPromptChange(value) {
      // 找到选中的选项
      const selectedOption = this.aipromptOptions.find(item => item.value === value)
      if (selectedOption) {
        this.form.aiprompt_name = selectedOption.label
      }
    },

    // 测试AI模型
    handleTest() {
      this.testVisible = true
      this.testResult = ''
    },

    // 执行测试
    executeTest() {
      if (!this.testInput) {
        this.$message.warning('请输入测试内容')
        return
      }

      this.testLoading = true
      this.testResult = ''

      // 准备请求参数
      const requestData = {
        engine: this.form.engine,
        humanway: false
      }

      // 如果有aiprompt_id，使用ID，否则使用prompt
      if (this.form.aiprompt_id) {
        requestData.aiprompt_id = this.form.aiprompt_id
        requestData.kvs = [{ 'user_content': this.testInput }]
      } else {
        // 如果有{{user_content}} 替换，如果没有直接加入
        if (this.form.prompt.includes('{{user_content}}')) {
          requestData.prompt = this.form.prompt.replace('{{user_content}}', this.testInput)
        } else {
          requestData.prompt = this.form.prompt + '##user input\n' + this.testInput
        }
      }
      if (this.form.output_template) {
        requestData.prompt += '##output example\n' + this.form.output_template
      }
      // 发送请求
      PostAiContent(requestData)
        .then(response => {
          this.testResult = response.original_content || response.content || '无返回内容'
          this.testLoading = false
        })
        .catch(error => {
          this.testResult = '测试失败: ' + (error.message || '未知错误')
          this.testLoading = false
        })
    },

    // 拖拽开始
    handleDragStart(node) {
      this.dragState.oldParentId = node.data.parent_id
      this.dragState.oldPosition = node.data.position
    },

    // 拖拽进入目标节点
    handleDragEnter(draggingNode, dropNode, ev) {
      ev.preventDefault()
    },

    // 拖拽离开目标节点
    handleDragLeave(draggingNode, dropNode, ev) {
      ev.preventDefault()
    },

    // 拖拽经过目标节点
    handleDragOver(draggingNode, dropNode, ev) {
      ev.preventDefault()
    },

    // 拖拽结束
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      ev.preventDefault()
    },

    // 更新多个节点位置的API调用
    updateNodesPosition(updates, newParentId, draggedNodeId) {
      this.formLoading = true

      // 创建一个Promise数组来存储所有更新请求
      const updatePromises = updates.map(update => {
        // 对于被拖拽的节点，同时更新parent_id和position
        if (update.id === draggedNodeId) {
          const updateData = {
            position: update.position,
            parent_id: newParentId === undefined ? null : newParentId // 确保 undefined 转为 null
          }
          console.log('拖拽节点更新数据:', updateData)
          return Put(update.id, updateData)
        } else {
          // 对于其他节点，更新position和保持原有的parent_id
          // 查找节点的当前parent_id
          let currentParentId = null
          if (this.$refs.treeRef) {
            const node = this.$refs.treeRef.getNode(update.id)
            if (node && node.data) {
              currentParentId = node.data.parent_id === undefined ? null : node.data.parent_id
            }
          }

          const updateData = {
            position: update.position,
            parent_id: currentParentId // 保持原有的parent_id
          }
          console.log('其他节点更新数据:', updateData)
          return Put(update.id, updateData)
        }
      })

      // 等待所有更新完成
      Promise.all(updatePromises)
        .then(() => {
          this.formLoading = false
          // 刷新树数据
          this.refreshTree()
        })
        .catch((err) => {
          console.log(err)
          this.formLoading = false
          this.$message.error('节点位置更新失败')
        })
    },

    // 处理拖拽放置
    handleDrop(draggingNode, dropNode, dropType, ev) {
      ev.preventDefault()
      const draggingData = draggingNode.data

      // 计算新的父节点ID
      let newParentId = null
      if (dropType === 'inner') {
        // 放置为子节点
        newParentId = dropNode.data.id
      } else if (dropNode.level === 0) {
        // 放置为顶级节点的同级节点，parent_id 应为 null
        newParentId = null
      } else {
        // 放置为非顶级节点的同级节点
        newParentId = dropNode.data.parent_id === undefined ? null : dropNode.data.parent_id
      }

      console.log('拖拽目标父节点ID:', newParentId)

      // 获取同级节点列表（包括被拖拽的节点）
      let siblings = []
      if (dropType === 'inner') {
        // 放置为子节点
        siblings = dropNode.childNodes.map(node => node.data)
      } else {
        // 放置为同级节点
        siblings = dropNode.parent.childNodes.map(node => node.data)
      }

      // 从列表中移除被拖拽的节点（如果存在）
      siblings = siblings.filter(node => node.id !== draggingData.id)

      // 根据放置类型，在适当位置插入被拖拽的节点
      if (dropType === 'before') {
        const index = siblings.findIndex(node => node.id === dropNode.data.id)
        siblings.splice(index, 0, draggingData)
      } else if (dropType === 'after') {
        const index = siblings.findIndex(node => node.id === dropNode.data.id)
        siblings.splice(index + 1, 0, draggingData)
      } else { // inner
        siblings.push(draggingData)
      }

      // 重新计算所有节点的position，从1开始
      const updates = siblings.map((node, index) => {
        return {
          id: node.id,
          position: index + 1 // 从1开始
        }
      })

      // 更新节点位置
      this.updateNodesPosition(updates, newParentId, draggingData.id)
    },

    // 刷新节点数据
    refreshNodeData() {
      // 空实现，使用loadAllData代替
      this.$message.info('正在加载所有数据...')
      this.loadAllData()
    },

    // 强制执行手风琴模式
    enforceAccordionMode() {
      if (!this.accordionMode || !this.$refs.treeRef) return

      // 获取所有节点，按照父节点分组
      const nodesByParent = {}

      // 递归遍历所有节点
      const traverseNodes = (node) => {
        if (!node || !node.childNodes) return

        // 获取当前节点的所有子节点
        const children = node.childNodes || []

        if (children.length > 0) {
          // 记录当前节点的子节点
          const nodeId = node.data ? node.data.id : 'root'
          nodesByParent[nodeId] = children

          // 递归处理每个子节点
          children.forEach(child => {
            traverseNodes(child)
          })
        }
      }

      // 从根节点开始遍历
      traverseNodes(this.$refs.treeRef.root)

      // 对每个父节点，只保留一个展开的子节点
      Object.keys(nodesByParent).forEach(parentId => {
        const children = nodesByParent[parentId]

        // 找出所有展开的子节点
        const expandedChildren = children.filter(child => child.expanded)

        // 如果有多个展开的子节点，只保留第一个
        if (expandedChildren.length > 1) {
          for (let i = 1; i < expandedChildren.length; i++) {
            expandedChildren[i].collapse()
          }
        }
      })

      // 清除本地存储中的展开节点状态
      if (this.localStorageEnabled) {
        localStorage.removeItem(this.expandedNodesKey)
      }
    },

    // 处理节点展开
    handleNodeExpand(expandedNode, expandedNodes) {
      // 如果启用了手风琴模式
      if (this.accordionMode) {
        // 找到当前节点的根节点
        let rootNode = expandedNode
        while (rootNode.parent && rootNode.parent.level > 0) {
          rootNode = rootNode.parent
        }

        // 如果找到了根节点，关闭根节点的所有兄弟节点
        if (rootNode.level === 1) {
          // 关闭所有其他根节点
          if (this.$refs.treeRef && this.$refs.treeRef.root.childNodes) {
            this.$refs.treeRef.root.childNodes.forEach(otherRootNode => {
              if (otherRootNode !== rootNode && otherRootNode.expanded) {
                // 递归收起节点及其所有子节点
                this.collapseNodeAndChildren(otherRootNode)
              }
            })
          }
        }

        // 同时处理同级节点的手风琴效果
        if (expandedNode.parent) {
          // 获取所有同级节点
          const siblings = expandedNode.parent.childNodes

          // 关闭除当前节点外的所有同级节点
          siblings.forEach(node => {
            if (node !== expandedNode && node.expanded) {
              node.collapse()
            }
          })
        }

        // 手风琴模式下，清除展开节点的本地存储
        if (this.localStorageEnabled) {
          localStorage.removeItem(this.expandedNodesKey)
        }
      }

      // 更新expandedIds数组
      this.$nextTick(() => {
        // 重新获取所有展开的节点ID
        const expandedNodes = []

        // 递归获取所有展开的节点ID
        const getExpandedNodeIds = (node) => {
          if (node.expanded && node.data && node.data.id) {
            expandedNodes.push(node.data.id)
          }

          if (node.childNodes && node.childNodes.length > 0) {
            node.childNodes.forEach(childNode => {
              getExpandedNodeIds(childNode)
            })
          }
        }

        // 从根节点开始遍历
        if (this.$refs.treeRef && this.$refs.treeRef.root.childNodes) {
          this.$refs.treeRef.root.childNodes.forEach(node => {
            getExpandedNodeIds(node)
          })
        }

        // 更新expandedIds
        this.expandedIds = expandedNodes

        // 保存展开的节点状态（仅在非手风琴模式下）
        if (!this.accordionMode) {
          this.saveExpandedNodes()
        }
      })
    },

    // 收起所有节点
    collapseAllNodes(node) {
      if (node.childNodes.length > 0) {
        node.childNodes.forEach(childNode => {
          childNode.collapse()
          this.collapseAllNodes(childNode)
        })
      }
    },

    // 处理节点折叠
    handleNodeCollapse(node) {
      // 如果启用了手风琴模式
      if (this.accordionMode) {
        // 找到当前节点的根节点
        let rootNode = node
        while (rootNode.parent && rootNode.parent.level > 0) {
          rootNode = rootNode.parent
        }

        // 如果当前节点是根节点，则不做特殊处理
        // 如果不是根节点，则处理同级节点的手风琴效果
        if (node.parent) {
          // 获取所有同级节点
          const siblings = node.parent.childNodes

          // 关闭除当前节点外的所有同级节点
          siblings.forEach(sibling => {
            if (sibling !== node && sibling.expanded) {
              sibling.collapse()
            }
          })
        }

        // 手风琴模式下，清除展开节点的本地存储
        if (this.localStorageEnabled) {
          localStorage.removeItem(this.expandedNodesKey)
        }
      }
    },

    // 保存当前树的状态
    saveTreeState() {
      // 保存当前选中节点
      if (this.$refs.treeRef && this.$refs.treeRef.getCurrentKey) {
        this.savedTreeState.currentNodeId = this.$refs.treeRef.getCurrentKey()
      }

      // 保存当前展开的节点
      if (this.$refs.treeRef && this.$refs.treeRef.getCheckedKeys) {
        this.savedTreeState.expandedIds = [...this.expandedIds]
      }
    },

    // 恢复树的状态
    restoreTreeState() {
      if (!this.$refs.treeRef) return

      this.$nextTick(() => {
        // 恢复选中节点
        if (this.savedTreeState.currentNodeId) {
          this.$refs.treeRef.setCurrentKey(this.savedTreeState.currentNodeId)
        }

        // 恢复展开的节点
        if (this.savedTreeState.expandedIds.length > 0) {
          // 在手风琴模式下不恢复展开状态
          if (!this.accordionMode) {
            this.expandedIds = [...this.savedTreeState.expandedIds]

            // 确保节点可见
            this.expandedIds.forEach(id => {
              const node = this.$refs.treeRef.getNode(id)
              if (node && !node.expanded) {
                node.expand()
              }
            })
          }
        }
      })
    },

    // 添加子节点
    handleAddChildNode() {
      if (!this.currentNode) {
        this.$notify.warning({
          title: '警告',
          message: '请先选择一个节点'
        })
        return
      }

      this.resetForm()

      // 设置父节点信息
      this.form.parent_id = this.currentNode.id
      this.form.parent_name = this.currentNode.name

      // 重置标题为"添加AI模型"
      this.formTitle = '添加AI模型'

      this.formVisible = true
    },

    // 设置编辑器滚动行为
    setupEditorScrollBehavior() {
      // 查找所有编辑器实例
      const editors = document.querySelectorAll('.v-md-editor')

      editors.forEach(editor => {
        // 找到编辑区域元素
        const editorArea = editor.querySelector('.v-md-editor__editor')
        if (editorArea) {
          // 防止滚轮事件传播到父元素
          editorArea.addEventListener('wheel', (event) => {
            // 检查是否可以滚动
            const canScrollDown = editorArea.scrollTop + editorArea.clientHeight < editorArea.scrollHeight
            const canScrollUp = editorArea.scrollTop > 0

            // 仅在可以在正确方向滚动时阻止默认行为
            if ((event.deltaY > 0 && canScrollDown) || (event.deltaY < 0 && canScrollUp)) {
              event.stopPropagation()
              // 允许默认行为发生 - 编辑器内容滚动
            } else {
              // 在边界处时不阻止事件，允许页面滚动
            }
          }, { passive: false })
        }

        // 为编辑器添加明显的滚动条样式
        if (editor.classList.contains('no-preview-editor')) {
          editor.style.overflow = 'hidden' // 确保外部容器不滚动
        }
      })
    },

    // 返回从本地存储加载的数据
    isDataFromLocalStorage() {
      return this.localStorageEnabled &&
             localStorage.getItem(this.localStorageKey) &&
             JSON.parse(localStorage.getItem(this.localStorageKey))['root'] &&
             JSON.parse(localStorage.getItem(this.localStorageKey))['root'].length > 0
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  height: 100%;
}

.filter-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.node-actions {
  display: none;
}

.custom-tree-node:hover .node-actions {
  display: inline-block;
}

.tree-actions {
  margin-top: 10px;
  text-align: center;
}

/* 添加固定侧边栏的样式 */
.fixed-aside {
  height: calc(100vh - 40px);
  position: sticky;
  top: 20px;
}

/* 树容器样式，允许滚动 */
.tree-container {
  height: calc(100% - 50px);
  overflow-y: auto;
}

/* 主内容区域样式 */
.scrollable-main {
  overflow-y: auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.test-result {
  margin-top: 20px;
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
}

.result-content {
  white-space: pre-wrap;
  word-break: break-word;
}

.el-tree-node__content {
  cursor: move;
}

.el-tree-node.is-drop-inner > .el-tree-node__content {
  background-color: #409EFF !important;
  color: white;
}

/* 新增样式 */
.editor-container {
  position: relative;
  border-radius: 4px;
  background-color: #f9f9f9;
  padding: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* 为编辑器添加适当的边距 */
.editor-container .v-md-editor {
  margin-bottom: 10px;
}

.color-preview {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  margin-left: 10px;
  border: 1px solid #dcdfe6;
}

/* 标签页内部的边距 */
.el-tab-pane {
  padding: 10px 0;
}

/* 调整表单项间距 */
.el-form-item {
  margin-bottom: 10px;
}

/* 表单区域样式 */
.form-section {
  margin-bottom: 15px;
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  background-color: #F9FAFC;
  padding: 12px;
  position: relative;
}

.form-section .section-title {
  position: absolute;
  top: -10px;
  left: 10px;
  background-color: white;
  padding: 0 5px;
  font-size: 13px;
  color: #606266;
  font-weight: 500;
}

/* 各区域的不同样式 */
.parent-section {
  background-color: #F5F7FA;
}

.parent-tag {
  margin-right: 10px;
}

.parent-id-input {
  width: 200px;
}

.info-section {
  background-color: #F5F7FA;
}

.settings-section {
  background-color: #F0F9EB;
}

.prompt-section {
  background-color: #F8F8F8;
}

/* 内联元素布局 */
.form-inline-group {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

/* 弹性布局 */
.form-flex-group {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px;
  margin-top: 8px;
}

.form-item-flex {
  flex: 1;
  min-width: 200px;
  padding: 0 5px;
  margin-bottom: 10px;
}

.form-item-small {
  width: 140px;
  padding: 0 5px;
  margin-bottom: 10px;
}

.form-item-medium {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  padding: 0 5px;
  margin-bottom: 10px;
}

.color-selection-container {
  position: relative;
  display: flex;
  align-items: center;
}

.color-help-icon {
  margin-left: 5px;
  cursor: pointer;
  color: #909399;
}

.color-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

/* 调整工具提示的内容样式 */
::v-deep .el-tooltip__popper p {
  margin: 5px 0;
  font-size: 12px;
  line-height: 1.4;
}

/* 响应式调整 */
@media screen and (max-height: 900px) {
  .editor-container .v-md-editor {
    height: calc(60vh - 100px) !important;
  }
}

@media screen and (max-height: 700px) {
  .editor-container .v-md-editor {
    height: calc(50vh - 80px) !important;
  }
}

/* 添加针对Markdown编辑器的样式优化 */
.el-form-item__label {
  padding-bottom: 5px;
  font-weight: 500;
  font-size: 13px;
}

/* 编辑器容器的样式优化 */
.editor-container {
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  overflow: hidden;
}

/* 确保Markdown编辑器在非预览模式下宽度最大化 */
::v-deep .v-md-editor__editor,
::v-deep .v-md-editor.is-no-preview .v-md-editor__editor {
  flex: 1;
  width: 100%;
  max-width: 100%;
}

/* 强制隐藏预览面板 */
::v-deep .v-md-editor:not([mode="preview"]) .v-md-editor__preview {
  display: none !important;
}

/* 强制编辑器面板展开 */
::v-deep .v-md-editor:not([mode="preview"]) .v-md-editor__editor {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* 特定为no-preview-editor类添加样式 */
::v-deep .no-preview-editor .v-md-editor__preview {
  display: none !important;
}

::v-deep .no-preview-editor .v-md-editor__editor {
  width: 100% !important;
  border-right: none !important;
}

/* 隐藏编辑器上方工具栏中的预览按钮 */
::v-deep .v-md-editor .v-md-editor__toolbar .v-md-editor__toolbar-item:nth-child(10) {
  display: none !important;
}

/* 增强编辑器的滚动条样式 */
::v-deep .v-md-editor__editor {
  overflow-y: auto !important;
  scrollbar-width: thin; /* Firefox */
}

/* Webkit浏览器（Chrome、Safari等）的滚动条样式 */
::v-deep .v-md-editor__editor::-webkit-scrollbar {
  width: 8px;
}

::v-deep .v-md-editor__editor::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::v-deep .v-md-editor__editor::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::v-deep .v-md-editor__editor::-webkit-scrollbar-thumb:hover {
  background: #606060;
}

/* 确保编辑器获得焦点时有明显的边框 */
::v-deep .v-md-editor:focus-within {
  border: 1px solid #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
</style>
